<!-- 分页组件 -->

<template>
  <div class="rbd-pagination">
    <a-pagination
      :current="params.currentPage"
      :show-quick-jumper="config.showQuickJumper"
      :total="params.total || 0"
      :show-total="(total) => `总共 ${total} 条记录`"
      :item-render="itemRender"
      :show-size-changer="config.showSizeChanger"
      :default-page-size="params.defaultPageSize || 10"
      :page-size="params.pageSize || 10"
      :page-size-options="params.pageSizeOptions || ['10', '20', '50', '100']"
      :size="config.size"
      @change="onChangePagination"
      @showSizeChange="onChangePaginationSize"
    />
  </div>
</template>

<script>
export default {
  props: {
    config: {
      type: Object,
      default() {
        return {
          showSizeChanger: true,
          showQuickJumper: true,
          size: "large",
        };
      },
    },
    params: {
      type: Object,
      default() {
        return {
          total: 0,
          currentPage: 1,
          defaultPageSize: 10,
          pageSize: 10,
          pageSizeOptions: ["10", "20", "50", "100"],
        };
      },
    },
  },
  methods: {
    //页码改变
    onChangePagination(page, pageSize) {
      this.$emit("emitPagenationParams", {
        ...this.params,
        currentPage: page,
        pageSize: pageSize,
      });
    },
    //pageSize改变
    onChangePaginationSize(page, pageSize) {
      this.$emit("emitPagenationParams", {
        ...this.params,
        currentPage: page,
        pageSize: pageSize,
      });
    },
    //分页格式
    itemRender(page, type, originalElement) {
      if (type === "prev") {
        return <a>上一页</a>;
      } else if (type === "next") {
        return <a>下一页</a>;
      }
      return originalElement;
    },
  },
};
</script>

<style scoped>
.rbd-pagination {
  padding-top: 12px;
}
.ant-pagination {
  position: relative;
  text-align: right;
}
::v-deep .ant-pagination-total-text {
  margin-right: 16px;
}
::v-deep .ant-pagination-item-active {
  background: var(--bg-color);
  border-color: var(--bg-color);
  color: #fff !important;
}
::v-deep .ant-pagination-item-active a {
  color: #fff !important;
}
::v-deep .ant-pagination-prev,
::v-deep .ant-pagination-next {
  border: 1px solid #d9d9d9;
}
::v-deep .ant-pagination-prev:not(.ant-pagination-disabled):hover,
::v-deep .ant-pagination-next:not(.ant-pagination-disabled):hover {
  background: #fff;
  border-color: var(--bg-color);
  transition: all 0.3s;
}
::v-deep .ant-pagination-prev:not(.ant-pagination-disabled):hover a,
::v-deep .ant-pagination-next:not(.ant-pagination-disabled):hover a {
  color: var(--bg-color);
}
.ant-pagination-prev a,
.ant-pagination-next a {
  padding: 0 6px;
}

::v-deep .ant-pagination-prev,
.ant-pagination-next,
.ant-pagination-jump-prev,
.ant-pagination-jump-next {
  font-family: "Microsoft YaHei" !important;
}
::v-deep .ant-pagination-item {
  font-family: "Microsoft YaHei" !important;
}
::v-deep .ant-pagination-item:focus,
::v-deep .ant-pagination-item:hover {
  border-color: var(--bg-color) !important;
}

::v-deep .ant-pagination-item a:hover {
  color: var(--bg-color) !important;
}
::v-deep .ant-pagination-item-active a:hover {
  color: #fff !important;
}
::v-deep .ant-pagination-options-quick-jumper input:hover,
::v-deep .ant-pagination-options-quick-jumper input:focus {
  border-color: var(--bg-color) !important;
}
::v-deep .ant-pagination-options-size-changer.ant-select {
  margin-right: 0px;
}
::v-deep .ant-pagination-options-quick-jumper {
  margin-left: 8px;
}
</style>
